$(function () {
    let layer = layui.layer;
    let form = layui.form;
    getLinks()
    //发送ajax请求 获取链接列表
    function getLinks() {
        $.ajax({
            url: "admin/links",
            success: function (res) {
                console.log(res);
                //? 获取到相应结果，渲染到页面上
                res.data.forEach(item => {
                    $(`<tr>
                <td>${item.id}</td>
                <td><img src="${'http://localhost:8888/uploads/' + item.linkicon}" alt=""></td>
                <td>${item.linkname}</td>
                <td>${item.linkurl}</td>
                <td>${item.linkdesc}</td>
                <td>
                  <button type="button" class="layui-btn layui-btn-xs btn_edit" id='eit'>编辑</button>
                  <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete">删除</button>
                </td>`).appendTo('tbody');
                });
            }
        });
    }

    //-------------------- 添加功能 ------------------ 
    //?添加弹出层
    let addFormStr = `<form id="add-form" class="layui-form" style="margin: 15px 30px 0 0">
    <!-- 第一行：链接名称 -->
    <div class="layui-form-item">
      <label class="layui-form-label">链接名称</label>
      <div class="layui-input-block">
        <input type="text" name="linkname" required  lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <!-- 第二行：链接地址 -->
    <div class="layui-form-item">
      <label class="layui-form-label">链接地址</label>
      <div class="layui-input-block">
        <input type="text" name="linkurl" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
      </div>
    </div>
    <!-- 第三行：链接描述 -->
    <div class="layui-form-item">
      <label class="layui-form-label">链接描述</label>
      <div class="layui-input-block">
        <input type="text" name="linkdesc" required  lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
      </div>
    </div>
    <!-- 第四行：上传图片 -->
    <div class="layui-form-item">
      <div class="layui-input-block icon-url">
        <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <input type="file" name="linkicon" id="linkFile" style="display: none;">
        <img id="preIcon" src="">
      </div>
    </div>
    <!-- 第三行：按钮 -->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>`

    let eitFormStr = ` <form id="edit-form" lay-filter='editForm' class="layui-form" style="margin: 15px 30px 0 0">
  <!-- 第一行：密码 -->
  <div class="layui-form-item">
    <label class="layui-form-label">链接名称</label>
    <div class="layui-input-block">
      <input type="text" name="linkname" required  lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
    </div>
  </div>
  <!-- 第二行：确认密码 -->
  <div class="layui-form-item">
    <label class="layui-form-label">链接地址</label>
    <div class="layui-input-block">
      <input type="text" name="linkurl" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
    </div>
  </div>
  <!-- 第三行：链接描述 -->
  <div class="layui-form-item">
    <label class="layui-form-label">链接描述</label>
    <div class="layui-input-block">
      <input type="text" name="linkdesc" required  lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
    </div>
  </div>
  <!-- 第四行：上传图片 -->
  <div class="layui-form-item">
    <div class="layui-input-block icon-url">
      <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
        <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
      <input type="file" id="linkFile" style="display: none;">
      <img id="preIcon" src="">
    </div>
  </div>
  <!-- 第三行：按钮 -->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>`
    let index;
    $('#add-link').click(function () {
        // console.log(1);
        index = layer.open({
            type: 1, // 层的类型，1表示页面层
            title: '添加文章类别', // 标题
            area: ['500px', '400px'], // 宽度高度
            content: addFormStr, // 内容
        })
    })
    //!给表单注册submit事件
    $("body").on("submit", "#add-form", function (e) {
        e.preventDefault();
        // console.log(2);
        // 收集表单数据
        let str = $(this).serialize();
        //发送AJAX请求
        $.ajax({
            url: "admin/links",
            type: 'POST',
            data: str,
            //?请求成功
            success: function (res) {
                return layer.msg(res.message);
            },
            //?请求失败
            error: function (res) {
                return layer.msg(res.message);
            },
            //?请求完成
            complete: function () {
                //关闭弹出层 
                layer.close(index)

                //重新获取列表
                getLinks()
            }
        })
    })
    ///-------------------------  删除功能 ------------------
    $('body').on('click', '.btn_delete', function () {
        //发送AJAX请求 
        let id = $(this).parent().prev().prev().prev().prev().prev().html() // 第一个td
        // console.log(id);
        // console.log(3);
        layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function (index) {

            $.ajax({
                url: 'admin/links/' + id,
                type: 'DELETE',
                success: function (res) {
                    return layer.msg(res.message);
                },
                //?请求失败
                error: function (res) {
                    return layer.msg(res.message);
                },
                //?请求完成
                complete: function () {
                    //关闭弹出层 
                    layer.close(index)
                    //重新获取列表
                    getLinks()
                }
            })
        })
    })

    //-------------------------------  编辑功能  -----------------------------
    $('body').on('click', '#eit', function () {
        // console.log(1);
        getLinks()
        index = layer.open({
            type: 1, // 层的类型，1表示页面层
            title: '添加文章类别', // 标题
            area: ['500px', '400px'], // 宽度高度
            content: eitFormStr, // 内容
        })
    })
})

